<template>
  <div id="app">
    <router-view/>
    <el-dialog
        :title="$store.state.showVideoTitle || '视频预览'"
        class="video-box"
        :visible.sync="$store.state.showVideoBox"
        width="730px">
        <!-- poster="" 封面 -->
        <video
            v-if="$store.state.showVideoBox"
            controls="controls"
            autoplay="autoplay"
            width="100%"
            height="405px"
            :src="$store.state.showVideoUrl"
            style="background: rgb(0, 0, 0);">
        </video>
    </el-dialog>

    <!-- 图片预览 -->
    <div
        v-if="$store.state.showImgBox"
        @click="imgClose"
        class="drap-show-img-box">
        <div class="img-box">
            <img :src="$store.state.showImgUrl" alt="">
        </div>
    </div>

  </div>
</template>

<script>
export default {
    methods: {
        imgClose () {
            this.$store.commit('changeShowImgBox', {
                flag: false,
                url: ''
            })
        }
    }
}
</script>

<style lang="scss">
    #app {
        // 如果是详情清除 input边框
        .input-no-border-box {
            .el-form-item {
                margin-bottom: 18px;
            }
            .el-input {
                .el-input__inner {
                    padding: 0 5px;
                    border: none;
                    border-bottom: 1px solid #DCDFE6;
                    border-radius: 0;
                }
            }
            .el-input.el-input--suffix {
                .el-input__inner {
                    border: 1px solid #DCDFE6;
                    border-radius: 4px;
                    padding: 0 15px;
                }
            }
        }

        // 时间选择器 中间汉字被padding影响
        .el-date-editor .el-range-separator {
            padding: 0;
        }
    }
</style>
<style lang="scss" scoped>
    .video-box {
        /deep/ .el-dialog__body {
            padding: 5px;
            video {
                outline: none;
            }
        }
    }

    // 预览图片
    .drap-show-img-box {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 99;
        background-color: rgba(0, 0, 0, .5);
        .img-box {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            > img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
</style>
